react native 路由
初次学习react native ,真的是一步一个坑，简单说说路由吧，希望看到到小伙伴们不要踩，网上到不太适合新版本的。推荐使用 yarn。yarn add react-navigationyarn add react-native-reanimated react-native-gesture-handler [email protected]^1.0.0-alpha.23...
2024-01-10
react native布局
像素无关react native中的尺寸是没有单位的，它代表了设备的独立像素flex box的弹性盒子布局和css3中有何不同？flexDiDirection在react native中的默认值是column，也就是默认是列排列；在web中默认值是row行排列alignItems：在react native中默认是stretch，在web中默认的是flex-startflex:在web中是可以接受三个参...
2024-01-10
react-native 真机调试
原文地址:https://dsx2016.com/?p=380➢ 运行程序手机USB连接电脑在根目录下react-native run-android程序会自动安装在连接的真机上➢ 安装程序打开USB调试模式,确认是文件传输,不是充电状态选择继续安装➢ 初始界面react-native的初始界面,能看到就说明程序运行成功➢ 摇一摇手机摇一摇,开启调试菜单...
2024-01-10
react-native 顶部导航栏
效果图： 项目结构如下： views和下面的页面手动创建环境依赖如下： 步骤下载 react-native-scrollable-tab-view$ npm install react-native-scrollable-tab-view --save编写代码App.jsimport React from 'react';import { Button, Text, View,Scr...
2024-01-10
react native实现登录页面
react native实现登录页面这是最终的效果图 { super(props); this.afterEnd = this._afterEnd; this.navigation = props.navigation; this.state = { username: '', passwo...
2024-01-10
react-native环境配置
一、Node环境安装下载地址：http://nodejs.cn/download/如果用不到最新特性的话，一般选择稳定版本但是注意，react-native要求：Node 的版本必须大于等于 10我们点击 Windows安装包，下载完成后双击打开，一路next，最后install就好这里推荐将安装路径放在C盘根目录，方便查看内容，当然，个人喜好，也可以默...
2024-01-10
react native 环境搭建与项目创建
JDK、Node、Python2、Android studio、react-native-cliJDK（必须是1.8版本）下载地址：（点击 Accept License Agreement ）https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 我这里选的是windows64位。下载完成后，得到的是一个 jdk-8u191-windows-x64.exe...
2024-01-10
react native多种导航混合使用
界面// App.jsimport React from 'react';import { StackNavigator, TabNavigator,} from 'react-navigation';import Detail from "./pages/Detail";import List from "./pages/List";import Cinemas from "./pages/Cinema";import Comfortable from "./pages/Comfortable...
2024-01-10
react-native 屏幕尺寸和文字大小适配
现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则，可...
2024-01-10
react-native App的原理介绍
react-native App中，大体可以理解为：整个APP作为容器,里面存放有多个父组件,子组件,孙子组件,各个组件都含有state和props这两个最重要的属性.如下图所示：React 有props和state，props意味着父级分发下来的属性，state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，也就是说数...
2024-01-10
react-native 初步接触要点总结
写在前面的话，要用好react-native，必须要先了解es6 和 jsx，之后再开始react-native之旅目前用react-native已经有一个星期了，记录其中一些要点1、props是只读的，唯一的修改时机为父渲染的时候，将新的props传递给子2、定义自己的props的时候使用defaultProps才能指定默认值3、定义自己的props的时候最好使用...
2024-01-10
react native 小项目, 持续更新中.....
摸索了 react-native 这么长时间了, 一直都是零零碎碎的写一点东西, 最近在业余时间, 网上扒了一些接口, 抄抄这个页面设计, copy copy 那个设计页面, 总算是写出了一个起码看上去算是个项目的东西. 在这里和大家分享一下. 侵删!!!1.登录模块设计效果:这里的忘记密码页面由于没有找到相应的接口, 所以这...
2024-01-10
react-native-svg的使用
今天学习一下react-native-svg,一如既往,在安装该库的时候,就有一大堆坑等你填.首先,我新建一个rn项目,按照官方说明先导入库npm install react-native-svg --save再链接库文件 rnpm link react-native-svg然后运行,成功报错:然后我换个姿势入水,我重新新建一个项目,先打开运行起来,再导入三方库和链接link.然后写一...
2024-01-10
react-native项目之样式总结
react native（以下简称rn）里面涉及到的样式规则都是在js文件中写的，一改pc端的在样式文件中定义规则，所以pc端开发习惯的童鞋转向开发rn项目时，可能会对样式感到有些奇怪；其实react在地面实现时会转化对应的样式。 rn中的css样式是css中的一个子集，对css的一些规程进行了阉割，此外还扩...
2024-01-10
react native 生命周期图解和RN开发小记
间断性小记，仅供自己参考，有不对的地方，非常欢迎各位大牛指教^ _ ^小生这厢有礼了〜1. es6 call和apply的区别与用法 有JavaScript的的基础，今天学习ES6过程中遇到的.CALL（）这个东东，很是疑惑。遂查了相关文档，作出以下小结，以备后用。 1，call 状语从句： apply 的英文为了动态改变...
2024-01-10
利用react native创建一个天气APP
我们将构建一个实列程序：天气App，（你可以在react native 中创建一个天气应用项目），我们将学习使用并结合可定义模板(stylesheets)、盒式布局(flexbox)、网络通信、用户输入、和图片来构建一个有用的APP，我们可以将它运行在Android或者IOS的设备上。...
2024-01-10
react setState 的用法
官方推荐的写法：函数式的写法this.setState((prevState) => ({ age: ++ prevState.age}))如果不这样写，因为 setState 是异步的，当疯狂的触发按钮，react会将多个setState合并成一个，这样就导致了，并非每次+1。react 中 s...
2024-01-10
react-native打包图片资源的大坑啊
error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..error: failed parsing overlays.解决方法：在gradle.properties文件中添加以下行：android.enableAapt2 = false，它实质上使用旧的aapt来获取资源。然后又出现了下面/xxx/android/app/build/intermediates/res/merged/dev/...
2024-01-10
如何在react native中同时启用对多个按钮的触摸？
我需要在触摸并按住一个按钮时也应该能够触摸按钮1。<View> <View onStartShouldSetResponder={()=>this.console("Button 2 Clicked")}> <Text>BUTTON 2</Text> </View> <TouchableOpacity onPressIn={()=>this.console('Button 1 pressed')} onPressOut={()=>this.console('Button 1 release...
2024-01-10
react ant Design手动设置表单的值操作
1.设置表单的值this.props.form.setFieldsValue({ name:"张三", });2.清空表单的值this.props.form.resetFields();3.获取某一输入框的值this.props.form.getFieldValue('newPassword');4.获取整个表单的值this.props.form.getFieldsValue();多看官方文档就知道这些东西了补充知识：react使用antd表单赋值，用于修改弹框1、使用getFieldDeco...
2024-01-10
react-native 简天气——仅仅一个天气而已
项目下载项目地址： ihewro/React-Native-WeatherAndroid端APK下载地址： https://www.pgyer.com/simpleWeather IOS端可以直接在模拟器上运行，没有打包欢迎给Star 、fork 、pl~截图IOSAndroid1Android2Android3特色简单，没有任何广告支持全国3000+城市查询白天黑色自动切换背景图片编不下去了 …… 系列笔记...
2024-01-10
react native 加载图片方式加在app端的填坑之路
在iOS文件夹下，一定要在xcode中添加才会加载出来图片，记得图片一定要定义高度页面代码：import React, { Component } from 'react';import { StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';//import Icon from 'react-native-vector-icons/FontAwesome';import Icon from 'react-native-v...
2024-01-10
React-native学习-22 - state使用
最近看代码发现，这个状态state定义的位置不是很明确，有时在constructor里，有时在constructor外。特意查了一下。下面是转来的。我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state...
2024-01-10错误“文档”未定义：eslint / React
我正在使用create-react-app构建一个React应用程序。运行ESLint时出现以下错误：8:3 error 'document' is not defined no-undef.我的应用程序运行没有错误，但是我在2个文件中遇到了这个ESLint错误。请参阅这些.jsx文件之一和我的ESLint配置。index.jsx：import React from 'react';import ReactDOM from 'react-dom';import App from './App';impo...
2024-01-10
